/*动画效果*/
@keyframes flash {
    0%,100%,50% {
        opacity: 1;
    }

    25%,75% {
        opacity: 0;
    }
}
@keyframes shake {
    0%,100% {
        transform: translateX(0);
    }

    10%,30%,50%,70%,90% {
        transform: translateX(-10px);
    }

    20%,40%,60%,80% {
        transform: translateX(10px);
    }
}
@keyframes bounce {
    0%,100%,20%,50%,80% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}
@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}
@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes slideOutUp {
    0% {
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
@keyframes slideOutRight {
    0% {
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
@keyframes elastic{
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(.8);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(30px);
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(30px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(-30px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes bounceOut {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(.3);
    }
}
@keyframes bounceOutUp {
    0% {
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        transform: translateY(20px);
    }

    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
@keyframes bounceOutDown {
    0% {
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
@keyframes bounceOutLeft {
    0% {
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        transform: translateX(20px);
    }

    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
@keyframes bounceOutRight {
    0% {
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        transform: translateX(-20px);
    }

    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        transform: translateX(0) skewX(-15deg);
        opacity: 1;
    }

    100% {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }
}
@keyframes lightSpeedOut {
    0% {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
}
@keyframes rubberBand {
    0% {
        transform: scale3d(1,1,1);
    }

    30% {
        transform: scale3d(1.25,.75,1);
    }

    40% {
        transform: scale3d(.75,1.25,1);
    }

    50% {
        transform: scale3d(1.15,.85,1);
    }

    65% {
        transform: scale3d(.95,1.05,1);
    }

    75% {
        transform: scale3d(1.05,.95,1);
    }

    100% {
        transform: scale3d(1,1,1);
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3);
    }

    50% {
        opacity: 1;
    }
}
@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
    }
}
@keyframes zoomInLeft {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
    }
}
@keyframes zoomInRight {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
    }
}
@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
    }
}
@keyframes zoomOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(.3,.3,.3);
    }

    100% {
        opacity: 0;
    }
}
@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }

    100% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
    }
}
@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
    }

    100% {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px,0,0);
        transform-origin: left center;
    }
}
@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
    }

    100% {
        opacity: 0;
        transform: scale(.1) translate3d(2000px,0,0);
        transform-origin: right center;
    }
}
@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }

    100% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
    }
}





/*闪*/
[data-animation-mode="flash"]{
	animation-name:flash;
}
/*抖动*/
[data-animation-mode="shake"]{
	animation-name:shake;
}
/*弹跳*/
[data-animation-mode="bounce"]{
	animation-name:bounce;
}
/*淡入*/
[data-animation-mode="fadeIn"]{
	animation-name:fadeIn;
}
/*向上淡入*/
[data-animation-mode="fadeInUp"]{
	animation-name:fadeInUp;
}
/*向下淡入*/
[data-animation-mode="fadeInDown"]{
	animation-name:fadeInDown;
}
/*向左淡入*/
[data-animation-mode="fadeInLeft"]{
	animation-name:fadeInLeft;
}
/*向右淡入*/
[data-animation-mode="fadeInRight"]{
	animation-name:fadeInRight;
}
/*向上淡入-大范围*/
[data-animation-mode="fadeInUpBig"]{
	animation-name:fadeInUpBig;
}
/*向下淡入-大范围*/
[data-animation-mode="fadeInDownBig"]{
	animation-name:fadeInDownBig;
}
/*向左淡入-大范围*/
[data-animation-mode="fadeInLeftBig"]{
	animation-name:fadeInLeftBig;
}
/*向右淡入-大范围*/
[data-animation-mode="fadeInRightBig"]{
	animation-name:fadeInRightBig;
}
/*淡出*/
[data-animation-mode="fadeOut"]{
	animation-name:fadeOut;
}
/*向上淡出*/
[data-animation-mode="fadeOutUp"]{
	animation-name:fadeOutUp;
}
/*向下淡出*/
[data-animation-mode="fadeOutDown"]{
	animation-name:fadeOutDown;
}
/*向左淡出*/
[data-animation-mode="fadeOutLeft"]{
	animation-name:fadeOutLeft;
}
/*向右淡出*/
[data-animation-mode="fadeOutRight"]{
	animation-name:fadeOutRight;
}
/*向上淡出-大范围*/
[data-animation-mode="fadeOutUpBig"]{
	animation-name:fadeOutUpBig;
}
/*向下淡出-大范围*/
[data-animation-mode="fadeOutDownBig"]{
	animation-name:fadeOutDownBig;
}
/*向左淡出-大范围*/
[data-animation-mode="fadeOutLeftBig"]{
	animation-name:fadeOutLeftBig;
}
/*向右淡出-大范围*/
[data-animation-mode="fadeOutRightBig"]{
	animation-name:fadeOutRightBig;
}
/*同：向上淡入-大范围*/
[data-animation-mode="slideInDown"]{
	animation-name:slideInDown;
}
/*同：向下淡入-大范围*/
[data-animation-mode="slideInUp"]{
	animation-name:slideInUp;
}
/*同：向左淡入-大范围*/
[data-animation-mode="slideInLeft"]{
	animation-name:slideInLeft;
}
/*同：向右淡入-大范围*/
[data-animation-mode="slideInRight"]{
	animation-name:slideInRight;
}
/*同：向上淡出-大范围*/
[data-animation-mode="slideOutUp"]{
	animation-name:slideOutUp;
}
/*同：向左淡出-大范围*/
[data-animation-mode="slideOutLeft"]{
	animation-name:slideOutLeft;
}
/*同：向右淡出-大范围*/
[data-animation-mode="slideOutRight"]{
	animation-name:slideOutRight;
}
/*弹动进入*/
[data-animation-mode="bounceIn"]{
	animation-name:bounceIn;
}
/*向上弹动进入*/
[data-animation-mode="bounceInUp"]{
	animation-name:bounceInUp;
}
/*向下弹动进入*/
[data-animation-mode="bounceInDown"]{
	animation-name:bounceInDown;
}
/*向左弹动进入*/
[data-animation-mode="bounceInLeft"]{
	animation-name:bounceInLeft;
}
/*向右弹动进入*/
[data-animation-mode="bounceInRight"]{
	animation-name:bounceInRight;
}
/*弹动退出*/
[data-animation-mode="bounceOut"]{
	animation-name:bounceOut;
}
/*向上弹动退出*/
[data-animation-mode="bounceOutUp"]{
	animation-name:bounceOutUp;
}
/*向下弹动退出*/
[data-animation-mode="bounceOutDown"]{
	animation-name:bounceOutDown;
}
/*向左弹动退出*/
[data-animation-mode="bounceOutLeft"]{
	animation-name:bounceOutLeft;
}
/*向右弹动退出*/
[data-animation-mode="bounceOutRight"]{
	animation-name:bounceOutRight;
}
/*光速进入*/
[data-animation-mode="lightSpeedIn"]{
	animation-name:lightSpeedIn;
}
/*光速退出*/
[data-animation-mode="lightSpeedOut"]{
	animation-name:lightSpeedOut;
}
/*橡胶弹动*/
[data-animation-mode="rubberBand"]{
	animation-name:rubberBand;
}
/*缩放淡入*/
[data-animation-mode="zoomIn"]{
	animation-name:zoomIn;
}
/*向下缩放淡入*/
[data-animation-mode="zoomInDown"]{
	animation-name:zoomInDown;
}
/*向左缩放淡入*/
[data-animation-mode="zoomInLeft"]{
	animation-name:zoomInLeft;
}
/*向右缩放淡入*/
[data-animation-mode="zoomInRight"]{
	animation-name:zoomInRight;
}
/*向上缩放淡入*/
[data-animation-mode="zoomInUp"]{
	animation-name:zoomInUp;
}
/*缩放淡出*/
[data-animation-mode="zoomOut"]{
	animation-name:zoomOut;
}
/*向下缩放淡出*/
[data-animation-mode="zoomOutDown"]{
	animation-name:zoomOutDown;
}
/*向左缩放淡出*/
[data-animation-mode="zoomOutLeft"]{
	animation-name:zoomOutLeft;
}
/*向右缩放淡出*/
[data-animation-mode="zoomOutRight"]{
	animation-name:zoomOutRight;
}
/*向上缩放淡出*/
[data-animation-mode="zoomOutUp"]{
	animation-name:zoomOutUp;
}
